<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: red;
            border: 10px solid blue;
            margin: 10px;
        }

        span {
            width: 400px;
            height: 400px;
            background-color: green;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
<!--    这一个第一个HTML页面-->
<!--    <img src="file:///d:/1.txt.jpg">-->
<!--    http协议，相对路径写法，参照物是谁？参照是浏览器的地址-->
<!--    <img src="../1.txt.jpg">-->
<!--    http协议，绝对路径写法-->
<!--    <img src="http://localhost:63342/lingshi2018_web/1.jpg">-->
<div>
    大盒子：块级元素
    1、宽度默认占满浏览器，且换行
    2、有宽(width)和高(height)属性，一般指的是CSS属性
    3、有上下左右的内边距、外边距
    4、margin，不是求和计算，而取最大值
    width：是指定元素的内容宽度
    padding：内容与盒子边框线内侧的间距
    border：边框线的宽（厚）度
    宽度 = width + 左右padding + 左右border
</div>
<div></div>
<span>
        小盒子：行内元素，内联元素
            1、没有宽高，默认宽高由内容决定
            2、没有上和下的外边距，内边距不影响布局，只影响视觉效果
            3、元素之间的margin，是求和计算
    </span>

<span>
        字少的
    </span>
<div></div>

可以通过display属性来设置内联块级元素，有宽和高，且不会换行。将块级和内联元素的特点都具备了
浮动和定位就是将元素变成了内联块级元素
</body>
</html>